<template>
	<view class="container">
		<image src="/static/login/nav_back_602.png" class="return_img" @tap="backToppage()"></image>
		<view class="login_headTitle">
			<text class="login_headTitle_big">匠小佐注册</text>
		</view>
		<!-- 输入框 -->
		<view class="login_inputBox">
			<view class="login_inputBox_inner">
				<view class="inner_titleBox">
					<text class="paddword" space='emsp'>密  码</text>
				</view>
				<view class="inner_iptBox">
					<input :type="type ? 'text':'password'" placeholder="请输入密码" placeholder-class="placStyle" v-model="password" @input="isFinishallInfo()">
					<image src="/static/login/icon_zy_606.png" class="open_eye" v-if="passIfOpen" @tap='lockPassword'></image>
					<image src="/static/login/icon_by_607.png" class="close_eye" v-if="!passIfOpen" @tap='lockPassword'></image>
				</view>
			</view>
			<view class="login_inputBox_inner">
				<view class="inner_titleBox">
					<text class="paddword">确认密码</text>
				</view>
				<view class="inner_iptBox">
					<input :type="agianType ? 'text':'password'" placeholder="请再次输入密码" placeholder-class="placStyle" v-model="secpassword" @input="isFinishallInfo()">
					<image src="/static/login/icon_zy_606.png" class="open_eye" v-if="againIfOpen" @tap='lockAgainPassword'></image>
					<image src="/static/login/icon_by_607.png" class="close_eye" v-if="!againIfOpen" @tap='lockAgainPassword'></image>
				</view>
			</view>
		</view>
		<!-- 协议 -->
		<view class="login_agreement">
			<image src="/static/login/img_605.png" v-if="ifSelect" class="select_img" @tap='selectRadio'></image>
			<view class="login_agreement_emptyBox" v-else="ifSelect" @tap='selectRadio'></view>
			<text>登录注册即代表你同意</text>
			<text class="agreement_content">《xx用户协议》</text>
		</view>
		<!-- 登陆按钮 -->
		<view class="login_submit" @tap="requestRegister()">
			<text :style="{backgroundColor:registerDisabled?'#e3e3e3':'#0EAE64'}">注册</text>
		</view>
		<!-- 注册，账号登陆 -->
		<view class="login_register">
			<text>已有账号</text>
			<text class="now_login" @tap="relaunchLogin()">去登陆</text>
		</view>
	</view>
</template>

<script>
	import {register} from '@/apis/request.js'
	export default {
		data() {
			return {
				passIfOpen:false,
				againIfOpen:false,
				type:false,
				agianType:false,
				ifSelect:false,
				password:'',
				secpassword:'',
				registerDisabled:true,
				userphone:'',
				code:''
			};
		},
		onLoad(options){
			this.userphone=options.phone;
			this.code=options.code;
		},
		methods:{
			// 密码输入框点击显示密码
			lockPassword(){
				this.type = ! this.type
				this.passIfOpen = !this.passIfOpen
			},
			// 再次输入密码框点击显示密码
			lockAgainPassword(){
				this.agianType = ! this.agianType
				this.againIfOpen = !this.againIfOpen
			},
			// 勾选协议框
			selectRadio(){
				this.ifSelect = !this.ifSelect;
				this.isFinishallInfo();
			},
			//发起注册
			requestRegister(){
				if(this.registerDisabled){
					return ;
				}
				if(this.password != this.secpassword){
					uni.showToast({
						icon:'none',
						title:'两次密码输入不一致'
					});
					return ;
				}
				this.$http({
					url:register,
					method:"POST",
					data:{
						password:this.password,
						phone:this.userphone,
						vcode:this.code
					},
					header:{
						'content-type':'application/json'
					}
				})
				.then(res=>{
					console.log(res)
				})
				.catch(error=>{
					console.log(error)
				})
			},
			relaunchLogin(){
				uni.reLaunch({
					url:'../login/login'
				})
			},
			//判断是否已经完成所有信息
			isFinishallInfo(){
				if(this.password == '' || this.secpassword == '' || !this.ifSelect){
					return ;
				}
				this.registerDisabled=false;
			},
			//返回上一页面
			backToppage(){
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>

<style lang="scss">
.placStyle{
	color: #888888;
	font-size: 28rpx;
	margin-left: 50rpx;
}
.return_img{
	width: 27rpx;
	height: 41rpx;
	position: fixed;
	left: 30rpx;
	top: 80rpx;
}
.login_headTitle{
	padding-left: 100rpx;
	margin-top: 190rpx;
	&_big{
		font-size: 59rpx;
		color: #0EAE64;
		margin-bottom: 43rpx;
	};
}
.login_inputBox{
	margin-top: 179rpx;
	padding:  0 89rpx 0 93rpx;
	&_inner{
		display: flex;
		height: 57rpx;
		align-items: center;
		justify-content: center;
		margin-top: 64rpx;
		.inner_titleBox{
			width: 160rpx;
			text{
				color: #222222;
				font-size: 32rpx;
			}
		}
		.inner_iptBox{
			width: 473rpx;
			height: 57rpx;
			border-bottom: 2rpx solid #D2D2D2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			input{
				width: 90%;
				height: 100%;
				padding-left: 20rpx;
				border: none;
			}
			.open_eye{
				width: 32rpx;
				height: 24rpx;
			}
			.close_eye{
				width: 33rpx;
				height: 18rpx;
			}
		}
	}
}
.login_agreement{
	display: flex;
	padding-left: 93rpx;
	margin-top: 34rpx;
	align-items: center;
	&_emptyBox{
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #cccccc;
		margin-right: 16rpx;
	}
	.select_img{
		width: 25rpx;
		height: 25rpx;
		margin-right: 16rpx;
	}
	text{
		color: #888888;
		font-size: 24rpx;
	}
	.agreement_content{
		color: #FF7547;
	}
	
}
.login_submit{
	display: flex;
	justify-content: center;
	margin-top: 154rpx;
	text{
		display: block;
		width: 569rpx;
		height: 96rpx;
		background-color: #e3e3e3;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
}
.login_register{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32rpx;
	text{
		color: #222222;
		font-size: 26rpx;
	}
	.now_login{
		color: #FF7447;
	}
}
</style>
